


var home = document.querySelector("#home");
if(home != null){
    //home主体右边的轮播
    var wra = new Swiper('.swiper-container',{
        autoplay:true,
        loop:true
    });



//主体中间的轮播
    var asd = new Swiper('.swiper-asd', {
        loop:true,
        autoplay:true,
        pagination: {
            el: '.swiper-pagination',
            clickable:true,
        },
    });

    var abc = new Swiper('.swiper-recipes', {
        slidesPerView: 3,
        spaceBetween: 30,
        slidesPerGroup: 3,
        loop: true,
        loopFillGroupWithBlank: true,
        pagination: {
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });


//主体内容for循环
    new Vue({
        el:"#meal",
        data:{
            foods:[
                {pic:"images/popular-1.gif",title:"香到骨头里的蒜香排骨",sp1:"懒饭App",sp2:"427 做过"},
                {pic:"images/popular-2.gif",title:"好喝鲜美的菌菇豆腐汤",sp1:"起床起床起床",sp2:"15 做过"},
                {pic:"images/popular-3.gif",title:"听说你们没地方传隔夜法...",sp1:"姗胖胖",sp2:"239 做过"},
                {pic:"images/popular-4.gif",title:"芦荟炒鸡丁",sp1:"鸡蛋花蒋蒋鸡蛋花",sp2:"0 做过"},
                {pic:"images/popular-5.gif",title:"凉拌鸡爪",sp1:"Mu吴小婵",sp2:"0 做过"},
                {pic:"images/popular-6.gif",title:"姥姥的爽口凉面！",sp1:"吃撒呢",sp2:"2239 做过"},
                {pic:"images/popular-7.gif",title:"抹茶红豆牛奶卷",sp1:"_慧绘美食记",sp2:"201 做过"},
                {pic:"images/popular-8.gif",title:"蒜炒红苋菜",sp1:"朴娃娃的私房菜",sp2:"20 做过"},
                {pic:"images/popular-9.gif",title:"四角长粽子的包法",sp1:"有你❤有我",sp2:"1171 做过"},
                {pic:"images/popular-10.gif",title:"番茄土豆片",sp1:"小萌子御膳房",sp2:"32 做过"},
                {pic:"images/popular-11.gif",title:"水晶西米粽",sp1:"复古米米",sp2:"153 做过"},
                {pic:"images/popular-12.gif",title:"鲫鱼豆腐汤",sp1:"斐的小肉肉",sp2:"736 做过"},
            ]
        }
    });

    new Vue({
        el:"#season",
        data:{
            seas:[
                {pic:"images/season-1.gif",text:"小龙虾"},
                {pic:"images/season-2.gif",text:"龙虾"},
                {pic:"images/season-3.gif",text:"榴莲"},
                {pic:"images/season-4.gif",text:"椰子"},
                {pic:"images/season-5.gif",text:"柠檬"},
                {pic:"images/season-6.gif",text:"笋"},
                {pic:"images/season-7.gif",text:"芦笋"},
                {pic:"images/season-8.gif",text:"山药"},
                {pic:"images/season-9.gif",text:"基围虾"},
                {pic:"images/season-10.gif",text:"西葫芦"},
                {pic:"images/season-11.gif",text:"芋头"},
                {pic:"images/season-12.gif",text:"莴笋"},
            ]
        }
    });

    new Vue({
        el:"#arr2",
        data:{
            message:"请求中..."
        },
        mounted(){
            axios
                .get("json/news.json")
                .then(response => this.message = response.data.urls)
                .catch(function (error) {
                    console.log(error);
                })
        }
    });









//主体右边内容的效果
//流行菜单
    new Vue({
        el:"#programme",
        data:{
            lists:[
                {pic:"images/main_you_menu1.gif",text:"肉食娃娃的主食方案"},
                {pic:"images/main_you_menu2.gif",text:"神奇的技法"},
                {pic:"images/main_you_menu3.gif",text:"必做"},
                {pic:"images/main_you_menu4.gif",text:"减肥周期里可以吃的"}
            ]
        }
    });

//下厨房的厨友们
    new Vue({
        el:"#kitchen",
        data:{
            kits:[
                {pic:"images/main_you_friend1.png",title:"丹东兔子",follow:"618 关注",works:"345 个作品",btn:"关注"},
                {pic:"images/main_you_friend2.png",title:"34街",follow:"2076 关注",works:"107 个菜谱 1010 个作品",btn:"关注"},
                {pic:"images/main_you_friend3.png",title:"手机用户13...",follow:"4 关注",works:"66 个作品",btn:"关注"},
                {pic:"images/main_you_friend4.png",title:"Helen699",follow:"5112 关注",works:"260 个菜谱 792 个作品",btn:"关注"},
                {pic:"images/main_you_friend5.png",title:"全红兰5888...",follow:"29 关注",works:"363 个作品",btn:"关注"},
                {pic:"images/main_you_friend6.png",title:"tauQQ陶朵...",follow:"3579 关注",works:"97 个菜谱 4422 个作品",btn:"关注"},
                {pic:"images/main_you_friend7.png",title:"乐乐妈的美...",follow:"340 关注",works:"4 个菜谱 596 个作品",btn:"关注"}
            ]
        }
    });




//导航栏移入移出效果
//肉
//获取div
    var rou = document.querySelector("#rou");
    var meat1 = document.querySelector("#meat1");
//移入肉按钮
    rou.addEventListener("mouseover",function(){
        //显示肉详情
        meat1.style.display = "block"
    });
//移出分类按钮
    rou.addEventListener("mouseleave",function(){
        //隐藏肉详情
        meat1.style.display = "none"
    });
//移入肉详情
    meat1.addEventListener("mouseover",function(){
//    显示肉详情
        meat1.style.display = "block"
    });
//移出肉详情
    meat1.addEventListener("mouseleave",function(){
//    隐藏肉详情
        meat1.style.display = "none"
    });

//蔬菜
//获取div
    var veg = document.querySelector("#veg");
    var bles = document.querySelector("#vegetables1");
//移入蔬菜按钮
    veg.addEventListener("mouseover",function(){
//    显示蔬菜分类
        bles.style.display = "block"
    });
//移出蔬菜按钮
    veg.addEventListener("mouseleave",function(){
//    隐藏蔬菜分类
        bles.style.display = "none"
    });
//移入蔬菜分类
    bles.addEventListener("mouseover",function(){
//    显示蔬菜分类
        bles.style.display = "block"
    });
//移出蔬菜分类
    bles.addEventListener("mouseleave",function(){
//    隐藏蔬菜分类
        bles.style.display = "none"
    });


} else{
//home-dishes主体内容循环
    var arr3 = new Vue({
        el:"#arr3",
        data:{
            urls3:"请求中~~"
        },
        mounted(){
            axios
                .get("../json/news.json")
                .then(response => this.urls3 = response.data.urls3)
                .catch(function(error){
                    console.log(error);
                })
        }
    });


}


//导航分类
//获取div
var cat1 = document.querySelector("#cation1");
var cat2 = document.querySelector("#cation");
//移入分类
cat1.addEventListener("mouseover",function(){
//    显示分类详情
    cat2.style.display = "block"
});
//移出分类
cat1.addEventListener("mouseleave",function(){
//    隐藏分类详情
    cat2.style.display = "none"
});
//移入分类详情
cat2.addEventListener("mouseover",function(){
//    显示分类详情
    cat2.style.display = "block"
});
//移出分类详情
cat2.addEventListener("mouseleave",function(){
//    隐藏分类详情
    cat2.style.display = "none"
});



//返回顶部的效果
var top1 = document.querySelector('#top1');
console.log(document.body.scrollTop || document.documentElement.scrollTop);
//滚动事件，滚动一次就会执行一次
window.onscroll = function(){
    console.log(document.body.scrollTop || document.documentElement.scrollTop);
//    判断它距离顶部的位置
    if(document.body.scrollTop > 100 || document.documentElement.scrollTop > 100){
        top1.style.display = 'block';
    }else{
        top1.style.display = 'none';
    }
};
top1.addEventListener('click',function(){
//    滚动到指定的位置
//    支持老版的Chorme浏览器
//    window.scrollTo(0,0);


    //支持新版的Chorme浏览器
    window.scrollTo({
        top:0,
        behavior:'smooth'
    })
});